<template>
  <div>
    <div class="masker" v-if="isShowMasker" @click="closeShowMasker"></div>
    <div v-if="!!action.enableShare" @click.stop="showAward" @touchstart="touchstart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" class="c-pf c-p-l24 p-b126 c-pz101 c-hh80">
      <div v-if="isShowMasker == false" class="c-flex-column c-flex-center">
        <div class="c-ww64 c-hh64">
          <img :src="require('@/assets/i/wap/course/gift.png')" alt="" class="c-w100 c-h">
        </div>
        <div class="c-bd1-white c-hh28 giftBtn br14 c-ph12 c-fc-white c-fs18 c-fw-b c-flex-row c-flex-center c-ws-n">
          赚<span v-if="Number(action.profitRewardPrice) > 0">{{'￥' | iosPriceFilter}}</span>{{Number(action.profitRewardPrice) > 0 ? action.profitRewardPrice : '奖励'}}
        </div>
      </div>
    </div>
    <div v-if="isShowMasker" class="c-pz1000 c-pf c-p-b0 c-p-l0 c-p-r0 c-maxw640 c-m-0auto c-w100 c-pt168" :class="Number(action.profitRewardPrice) > 0 ? 'distribution' : 'noDistribution'">
      <!-- 按钮 -->
      <div class="c-pa c-p-r20 closeBtn c-flex-row c-flex-center" @click="isShowMasker = false">
        <i class="iconfont c-fs40 c-fc-white">&#xe84e;</i>
      </div>
      <div class="c-pa c-p-l0 c-p-b30 c-w100 p-t156">
        <!-- 存在分销时 -->
        <div class="c-w100 c-textAlign-c c-pt26" v-if="Number(action.profitRewardPrice) > 0">
          <div class="c-fs26 c-fc-xmlred">每邀请一位好友下单你将获得</div>
          <div class="c-pv16 c-lh">
            <div class="c-fs72 c-fw-b">
              <span class="c-fs40 c-fw-b price">{{'￥' | iosPriceFilter}}</span>
              <span class="price">{{action.profitRewardPrice}}</span>
              <img class="c-ww28 c-hh58 c-ml20 c-inlineblack" v-if="action.prodType == ckFrom.activity" :src="require('@/assets/i/wap/recommend/least.png')" alt="">
            </div>
          </div>
          <div class="c-fs26 fc-mred decrease c-flex-row c-flex-center c-lh" v-if="action.beProfitRewardPrice != ''"><span class="c-ph10">好友立减{{'￥' | iosPriceFilter}}{{action.beProfitRewardPrice}}</span></div>
        </div>
        <!-- 有无分销都共用 -->
        <span class="c-hh40 c-ph16 c-pv6 c-br-tl16 c-br-br16 bg-lRed c-ml30 c-fs20 fc-lred c-ws-n c-inlineblack" :class="Number(action.profitRewardPrice) > 0 && Number(action.beProfitRewardPrice) == 0 ? 'mt82' : Number(action.profitRewardPrice) > 0 ? 'mt50' : ''">邀请{{action.mainReward.peopleCount}}位好友获得</span>
        <div class="pl54 pr44 pb152 c-w100 c-pt24">
          <div class="c-flex-row c-aligni-start c-justify-sb c-pb12 c-lh40">
            <div class="c-fw-b c-fc-xblack c-fs28 c-text-ellipsis2 w75">{{action.rewardTitle || '惊喜大礼包'}}</div>
            <div class="c-fc-gray c-fs22 c-flex-row c-aligni-center c-ws-n" @click="goDetails">查看详情<span class="iconfont c-pl10">&#xe635;</span></div>
          </div>
          <div class="c-fs24 c-fc-sblack c-lh36">
            <span v-for="(item, index) in action.mainReward.equityList" :key="index">{{item}}<span v-if="index != action.mainReward.equityList.length-1" class="c-ph10">/</span></span>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-ph22 c-fs28 c-w100 c-pa c-p-l0 c-p-b0">
          <div class="c-ww280 c-hh72 c-flex-row c-flex-center c-br36 c-fw-b" :class="index == 0 ? 'c-bg-white fc-red' : 'c-fc-white bg-red'" v-for="(item, index) in shareArr" :key="index" @click="goJump(index)">{{item}}</div>
        </div>
      </div>
    </div>
    <recommend-post :shareposter="shareposter" :sharePostInfo="shareInfo" @closeSharePost="closeSharePost"></recommend-post>
  </div>
</template>

<script>
import RecommendPost from "./recommendPost"
import { utilJs } from "@/utils/common.js";
import { mapMutations, mapState } from 'vuex';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
const TIME = 50
export default {
  name: "recommendAward",
  components: {
    RecommendPost
  },
  props: {
    action: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      ckFrom: global.ckFrom,
      isShowMasker: false,
      shareArr: ["邀请朋友", "邀请海报"],
      shareInfo: null, //海报内容
      shareposter: false, //是否显示海报
      shareUrl: "",
      bindPhoneSetting: null,
      timeOutEvent: 0,
      longClick: 0,
      // 手指原始位置
      oldMousePos: {},
      // 元素原始位置
      oldNodePos: {},
      type: 'right',
    }
  },
  computed: {
    ...mapState({
      showMoreShareModal: state => state.oem_store.showMoreShareModal
    }),
  },
  mounted() {
    getBindPhoneSetting(113).then(res => {
      this.bindPhoneSetting = res;
    });
  },
  activated() {
    this.isShowMasker = false;
  },
  methods: {
    ...mapMutations(['updateShowMoreShareModal']),
    closeShowMasker() {
      this.isShowMasker = false;
      this.handleMoving();
    },
    goDetails() {
      this.$routerGo(this, "push", {
        path: "/member/recommend/recommendIndex",
        query: {
          recId: this.action.recId
        }
      });
    },
    //获取分享海报
    getSharePostInfo() {
      utilJs.postMethod(global.apiurl + `activity/recommend/getShareLink`, {relateId: this.action.relateId}, res => {
        let info = {
          imageId: res.imageId,
          headimgurl: res.headimgurl,
          isShowRecommender: res.isShowRecommender,
          nickname: res.nickname,
          proTxt: res.proTxt,
          qrcode: res.qrcode,
          recShareData: res.recShareData,
          shareImg: res.shareImg,
          shareName: res.shareName,
          url: res.url,
        };
        this.shareUrl = res.url;
        this.shareInfo = info;
        this.$nextTick(() => {
          this.shareposter = true;
        })
      })
    },
    showAward() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.isShowMasker = true;
    },
    goJump(cIndex) {
      if (cIndex) {
        this.getSharePostInfo()
        this.isShowMasker = false;
      } else {
        this.updateShowMoreShareModal(true)
        this.$routerGo(this, "push", {
          path: "/member/recommend/recommendIndex",
          query: {
            recId: this.action.recId,
          }
        });
      }
    },
    closeSharePost() {
      this.shareposter = false;
    },
    preventDefault(e) {
      e.preventDefault()
    },
    touchstart (ev) {
      // 定时器控制长按时间，超过{TIME}毫秒开始进行拖拽
      this.timeOutEvent = setTimeout(() => {
        this.longClick = 1
      }, TIME)
      const selectDom = ev.currentTarget
      const { pageX, pageY } = ev.touches[0] // 手指位置
      const { offsetLeft, offsetTop } = selectDom // 元素位置
      // 手指原始位置
      this.oldMousePos = {
        x: pageX,
        y: pageY,
      }
      // 元素原始位置
      this.oldNodePos = {
        x: offsetLeft,
        y: offsetTop,
      }
      document.addEventListener("touchmove", this.preventDefault, { passive: false })
      document.addEventListener("mousemove", this.preventDefault, { passive: false })
      selectDom.style.left = `${offsetLeft}px`
      selectDom.style.top = `${offsetTop}px`
    },
    touchMove (ev) {
      // 未达到{TIME}毫秒就移动则不触发长按，清空定时器
      clearTimeout(this.timeOutEvent)
      if (this.longClick === 1) {
        const selectDom = ev.currentTarget
        // x轴偏移量
        const lefts = this.oldMousePos.x - this.oldNodePos.x
        // y轴偏移量
        const tops = this.oldMousePos.y - this.oldNodePos.y
        const { pageX, pageY } = ev.touches[0] // 手指位置
        selectDom.style.left = `${pageX - lefts}px`
        selectDom.style.top = `${pageY - tops}px`
        document.addEventListener("touchmove", this.preventDefault, { passive: false })
        document.addEventListener("mousemove", this.preventDefault, { passive: false })
      }
    },
    touchEnd (ev) {
      // 清空定时器
      clearTimeout(this.timeOutEvent)
      if (this.longClick === 1) {
        this.longClick = 0
        const selectDom = ev.currentTarget
        const { innerWidth, innerHeight } = window
        const { offsetLeft, offsetTop } = selectDom
        selectDom.style.left = offsetLeft + 50 > innerWidth / 2 ? 'calc(100% - 60px)' : '12px'
        if (offsetTop < 300) { // 详情顶部内容区域
          selectDom.style.top = '300px'
        } else if (offsetTop + 100 > innerHeight) { // 底部固定按钮区域
          selectDom.style.top = `${innerHeight - 100}px`
        }
        this.type = offsetLeft + 50 > innerWidth / 2 ? 'right' : 'left'
        setTimeout(() => {
          this.handleMoving();
        }, 1000)
      } else {
        setTimeout(() => {
          this.handleMoving();
        }, 1000)
      }
    },
    handleMoving () {
      document.removeEventListener('touchmove', this.preventDefault, false)
      document.removeEventListener('mousemove', this.preventDefault, false)
      document.addEventListener("touchmove", function(e) {
          window.event.returnValue = true
      })
      document.addEventListener("mousemove", function(e) {
          window.event.returnValue = true
      })
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.p-b126 {bottom: 3.15rem;}
.br14 {border-radius: 0.35rem;}
.masker {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  width: 100%;
  height: 100%;
  max-width: 16rem;
  background-color: rgba(0, 0, 0, 0.4);
}
.distribution {
  background: url("../../../assets/i/wap/course/distribution.png") no-repeat;
  background-size: 100% 100%;
  height: 20rem;
}
.noDistribution {
  background: url("../../../assets/i/wap/course/noDistribution.png") no-repeat;
  background-size: cover;
  height: 14.2rem;
}
.fc-red {
  color: #FE4D2D;
}
.fc-lred {
  color:#FF4323;
}
.fc-mred{color: #FF3921;}
.bg-red {
  background-image: linear-gradient(0deg, #FF300C 0%, rgba(255,48,12,0.70) 100%);
}
.bg-lRed {
  background-color: #FFE8E5;;
}
.pt168 {padding-top: 4.2rem}
.pb152 {padding-bottom: 3.8rem;}
.pb168 {padding-bottom: 4.2rem;}
.pl54 {padding-left: 1.35rem;}
.pr44 {padding-right: 1.1rem;}
.p-t156 {top: 3.9rem;}
.p-t168 {top: 4.2rem;}
.decrease:before, .decrease::after {
  content: '';
  width: 1.85rem;
  height: 0.8rem;
  background: url("../../../assets/i/wap/recommend/dasheed.png") no-repeat center center;
  background-size: contain;
  display: inline-block;
}
.price {
  background: linear-gradient(to bottom, #FF9716, #FF2147);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.closeBtn {
  top: -0.25rem;
  width: 1.075rem;
  height: 1.075rem;
}
.giftBtn {
  margin-top: -0.3rem;
  background-image: linear-gradient(90deg, rgba(255,48,12,0.70) 0%, #FF300C 100%);
}
.w75{width: 75%;}
.mt50 {margin-top: 1.25rem}
.mt82 {margin-top: 2.05rem}
.p-l-296 {
  left: calc(50% - 7.4rem);
}
</style>
